<!--
 * @Author: byron
 * @Date: 2021-10-03 16:09:12
 * @LastEditTime: 2021-10-04 12:30:53
-->
<template>
    <div class="search-playlists">
        <WithPagination
            :getData="getSearch"
            :getDataParams="getDataParams"
            @getDataSuccess="getDataSuccess"
            :total="total"
            :scrollTarget="searchRoot.$refs.searchRef"
        >
            <div class="list-warp">
                <PlaylistCard
                    v-for="(item, index) in playlist"
                    :key="index"
                    :name="item.name"
                    :img="item.coverImgUrl"
                    :desc="item.playCount"
                    class="list-item"
                ></PlaylistCard>
            </div>
        </WithPagination>
    </div>
</template>

<script>
import WithPagination from '@/components/with-pagination'
import { getSearch } from '@/api'
export default {
    inject: ['searchRoot'],

    components: { WithPagination },
    props: {},
    data() {
        return {
            playlist: [],
            total: 0,
        }
    },
    watch: {},
    computed: {
        getDataParams() {
            const keywords = this.searchRoot.keywords
            if (!keywords) return
            return {
                keywords: keywords,
                type: 1000,
            }
        },
    },
    methods: {
        getDataSuccess(result) {
            const { result: data } = result
            console.log('result', data)
            this.total = data.playlistCount
            this.playlist = data.playlists
            this.searchRoot.bindTotal(data.playlistCount)
        },
    },
    created() {
        this.getSearch = getSearch
    },
    mounted() {},
}
</script>
<style lang="scss" scoped>
.search-playlists {
    .list-warp {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .list-item {
            width: calc(25% - 8px);
            padding: 20px;
            margin: 0;
        }
    }
}
</style>
